<template>
  <div class="hello">
    <!--    初始化echarts需要个有宽高的盒子-->
    <el-row :gutter="10">
      <el-col :span="12">
        <div class="grid-content bg-purple">
          <el-tabs type="border-card">
            <el-tab-pane label="疫情概览">
              <p style="text-align: right;padding-right:11%;font-size:12px; color: #b2afb5 ">
                数据截止到:{{lastUpdateTime}}</p>
              <el-col :span="8">
                <div style="text-align: center;align-self: center">
                  <div>累计确诊</div>
                  <div style="font-size: 25px;color: #d61c12">{{total.confirm}}</div>
                  <div style="font-size:12px">
                    <span class="button_text">较上日:</span>
                    <span style="color: #d61c12"><span v-if="info.confirm>0">+</span>{{info.confirm}}</span>
                  </div>
                </div>
              </el-col>
              <el-col :span="8">
                <div style="text-align: center;align-self: center">
                  <div>累计治愈</div>
                  <div style="font-size: 25px;color: #44ce69">{{total.heal}}</div>
                  <div style="font-size:12px">
                    <span class="button_text">较上日:</span>
                    <span style="color: #44ce69"><span v-if="info.heal>0">+</span>{{info.heal}}</span>
                  </div>
                </div>
              </el-col>
              <el-col :span="8">
                <div style="text-align: center;align-self: center">
                  <div>累计死亡</div>
                  <div style="font-size: 25px;color: rgba(71,69,71,0.76)">{{total.dead}}</div>
                  <div style="font-size:12px">
                    <span class="button_text">较上日:</span>
                    <span style="color: rgba(71,69,71,0.76)"><span v-if="info.dead>0">+</span>{{info.dead}}</span></div>
                </div>
              </el-col>

              <el-col :span="8" style="margin-top: 30px">
                <div style="text-align: center;align-self: center">
                  <div>现有确诊</div>
                  <div style="font-size: 25px;color: rgba(230,122,6,0.98)">{{total.nowConfirm}}</div>
                  <div style="font-size:12px">
                    <span class="button_text">较上日:</span>
                    <span style="color: rgba(230,122,6,0.98)"><span v-if="info.nowConfirm>0">+</span>{{info.nowConfirm}}</span>
                  </div>
                </div>
              </el-col>
              <el-col :span="8" style="margin-top: 30px">
                <div style="text-align: center;align-self: center">
                  <div>境外输入确诊</div>
                  <div style="font-size: 25px;color: #31bad6">{{total.importedCase}}</div>
                  <div style="font-size:12px">
                    <span class="button_text">较上日:</span>
                    <span style="color: #31bad6"><span v-if="info.importedCase>0">+</span>{{info.importedCase}}</span>
                  </div>
                </div>
              </el-col>
              <el-col :span="8" style="margin-top: 30px">
                <div style="text-align: center;align-self: center">
                  <div>现有疑似</div>
                  <div style="font-size: 25px;color: #d6c363">{{total.suspect}}</div>
                  <div style="font-size:12px">
                    <span class="button_text">较上日:</span>
                    <span style="color: #d6c363"><span v-if="info.suspect>0">+</span>{{info.suspect}}</span>
                  </div>
                </div>
              </el-col>
            </el-tab-pane>

          </el-tabs>
        </div>
      </el-col>

      <!--疫情地图-->
      <el-col :span="12">
        <div class="grid-content bg-purple-light">
          <el-card>
            <div ref="mapBox" style="height:520px;"></div>
          </el-card>
        </div>
      </el-col>
    </el-row>

    <el-row :gutter="10" style="margin-top:10px;">
      <el-col :span="24">
        <div class="grid-content bg-purple">
          <el-card>
            <el-table stripe :data="tableData" style="width: 100%;">
              <el-table-column type="expand">
                <template slot-scope="scope">
                  <el-table :data="scope.row.children" style="width: 100%">
                    <el-table-column sortable="" label="城市（区）" prop="name"></el-table-column>
                    <el-table-column sortable="" label="新增确诊" prop="today.confirm"></el-table-column>
                    <el-table-column sortable="" label="现存确诊" prop="total.nowConfirm"></el-table-column>
                    <el-table-column sortable="" label="累计确诊" prop="total.confirm"></el-table-column>
                    <el-table-column sortable="" label="累计死亡" prop="total.dead"></el-table-column>
                    <el-table-column sortable="" label="现存无症状" prop="total.wzz"></el-table-column>
                  </el-table>
                </template>
              </el-table-column>

              <el-table-column sortable="" label="省份" prop="name"></el-table-column>
              <el-table-column sortable="" label="新增确诊" prop="today.confirm"></el-table-column>
              <el-table-column sortable="" label="现存确诊" prop="total.nowConfirm"></el-table-column>
              <el-table-column sortable="" label="累计确诊" prop="total.confirm"></el-table-column>
              <el-table-column sortable="" label="累计死亡" prop="total.dead"></el-table-column>
              <el-table-column sortable="" label="现存无症状" prop="total.wzz"></el-table-column>

            </el-table>
          </el-card>
        </div>
      </el-col>
    </el-row>
  </div>
</template>

<script>
  import echarts from 'echarts'
  import 'echarts/map/js/china'
  import jsonp from 'jsonp'

  const option = {
    title: {
      text: '疫情地图',
      link: 'https://baidu.com',
      subtext: '现有确认',
      sublink: 'https://baidu.com'
    },
    series: [
      {
        name: '确诊人数',
        type: 'map', //告诉echarts要去渲染一个地图
        map: 'china',
        label: {
          show: true, // 控制对应地区的汉字
          color: '#333',
          fontSize: 10
        },
        roam: true, //控制地图放大缩小
        zoom: 1.2, //控制地图的放大缩小
        data: [], //用来展示后台给的数据  {name:xx,value:xxx}
        /*      控制地图板块的颜色和边框*/
        itemStyle: {
          areaColor: '#83b5e7',
          borderColor: '#83b5e7' //边框颜色
        },
        /*     控制鼠标滑过之后的背景色和字体颜色*/
        emphasis: {
          label: {
            color: '#fff',
            fontsize: 12
          },
          itemStyle: {
            areaColor: '#83b5e7'
          }
        }
      }
    ],
    visualMap: [
      {
        type: 'piecewise',
        show: true,
        // splitNumber:4,
        pieces: [
          //分段
          { min: 10000 },
          {
            min: 1000,
            max: 9990
          },
          {
            min: 100,
            max: 999
          },
          {
            min: 10,
            max: 99
          },
          {
            min: 1,
            max: 9
          }
        ],
        // align:'right'
        //orient:'horizontal' 默认竖直
        //left right 这些属性控制分段所在的位置
        //textStyle() 分段大小
        inRange: {
          symbol: 'rect',
          color: ['#ffc0b1', '#e70520']
        },
        itemWidth: 20,
        itemHeight: 10
      }
    ],
    tooltip: {
      trigger: 'item' //鼠标移入后显示人数
    }
  }
  export default {
    name: 'Map',
    data () {
      return {
        lastUpdateTime: '',
        loading: true,
        info: [],
        total: [],
        tableData: [],
        localData: []
      }
    },
    mounted () {
      //template挂载到页面时调用
      this.getData() //执行getData方法

      this.mychart = echarts.init(this.$refs.mapBox)
      this.mychart.setOption(option)
    },
    methods: {
      getData () {
        jsonp(
          //'https://interface.sina.cn/news/wap/fymap2020_data.d.json?_=1580892522427', //接口
          'https://view.inews.qq.com/g2/getOnsInfo?name=disease_h5',
          //'https://c.m.163.com/ug/api/wuhan/app/data/list-total',
          {},
          (err, data) => {
            if (!err) {
              console.log(JSON.parse(data.data))
              //console.log( data)
              //代表请求数据成功
              //从接口获取到数据后，使用map()函数，进行接口数据映射
              option.series[0].data = JSON.parse(data.data).areaTree[0].children.map(item => ({
                name: item.name,
                value: item.total.nowConfirm
              }))
              this.tableData = JSON.parse(data.data).areaTree[0].children
              this.info = JSON.parse(data.data).chinaAdd
              this.total = JSON.parse(data.data).chinaTotal
              this.lastUpdateTime = JSON.parse(data.data).lastUpdateTime
              this.mychart.setOption(option)
              //这行代码能执行的前提是DOM已经渲染完成，只有DOM已渲染完成才能echarts初始化
            }
          }
        )
      },
    }
  }
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
  .button_text {
    color: #b2afb5
  }
</style>

